<template>
  <div class="search">
    <div class="searchInfo">
      <a-input
        class="search-item"
        v-model:value="query.name"
        placeholder="产品名称"
      />
      <a-button type="primary" @click="search" class="search-btn">
        <template #icon><search-outlined /> </template>
      </a-button>
      <a-button type="primary" @click="reload">
        <template #icon><reload-outlined /> </template>
      </a-button>
    </div>
    <a-button type="primary" @click="toAdd">
      <template #icon><plus-outlined /> </template>
    </a-button>
  </div>
  <a-table
    :dataSource="tableData.data"
    :columns="tableData.listColumns"
    :pagination="false"
    bordered
  >
    <template #bodyCell="{ column, index, record }">
      <template v-if="column.dataIndex === 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a @click="toUpdate(record)">编辑</a>
        <a-popconfirm
          title="是否确定删除？"
          cancel-text="否"
          ok-text="是"
          @confirm="del(record)"
        >
          <a style="padding-left: 10px">删除</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
  <a-pagination
    v-model:current="query.currentPage"
    :total="tableData.total"
    @change="pageChange"
    show-less-items
    :show-total="(total) => `共 ${total} 条`"
  />

  <a-modal
    v-model:visible="addForm.visible"
    title="新增"
    okText="确定"
    cancelText="取消"
    width="30%"
    :maskClosable="false"
    centered
    @ok="add"
    @cancel="cancelAdd"
  >
    <a-form
      :model="addForm.data"
      name="addForm"
      ref="addFormRef"
      v-bind="formLayout"
    >
      <a-form-item
        label="产品名称"
        name="name"
        :rules="[{ required: true, message: '请输入产品名称' },
          {
            message: '只能输入中文,字母,数字,最大长度为32',
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,32}$/,
          }]"
      >
        <a-input placeholder="中文,字母,数字,最大长度为30" v-model:value="addForm.data.name" />
      </a-form-item>
      <a-form-item
        label="产品编码"
        name="code"
        :rules="[
          { required: true, message: '请输入产品编码' },
          {
            message: '只能输入小写字母,数字,下划线,最大长度为32',
            pattern: /^[a-z0-9_]{1,32}$/,
          },
        ]"
      >
        <a-input placeholder="小写字母,数字,下划线,最大长度为30" v-model:value="addForm.data.code" />
      </a-form-item>
      <a-form-item
        label="排序值"
        name="sort"
        :rules="[{ required: true, message: '请输入排序值' }]"
      >
        <a-input-number placeholder="1" v-model:value="addForm.data.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal
    v-model:visible="updateForm.visible"
    title="修改"
    okText="确定"
    cancelText="取消"
    width="30%"
    :maskClosable="false"
    centered
    @ok="update"
    @cancel="cancelUpdate"
  >
    <a-form
      :model="updateForm.data"
      name="updateForm"
      ref="updateFormRef"
      v-bind="formLayout"
    >
      <a-form-item
        label="产品名称"
        name="name"
        :rules="[{ required: true, message: '请输入产品名称' },
          {
            message: '只能输入中文,字母,数字,最大长度为32',
            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,32}$/,
          }]"
      >
        <a-input v-model:value="updateForm.data.name" />
      </a-form-item>
      <a-form-item
        label="排序值"
        name="name"
        :rules="[{ required: true, message: '请输入排序值' }]"
      >
        <a-input-number v-model:value="updateForm.data.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import dayjs from "dayjs";
import { defineComponent } from "vue";
import { reactive, ref } from "@vue/reactivity";
import {
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { productApi } from "@/api/devcloudApi";
import { message } from "ant-design-vue";
import {
  clearObject,
  clone,
  deleteKeyIgnore,
  deleteKeyInclude,
} from "@/util/utils";

export default defineComponent({
  name: "product",
  components: {
    ReloadOutlined,
    SearchOutlined,
    PlusOutlined,
  },
  setup() {
    const returnObj: any = {}

    const formLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }

    // ------------ 查询条件 ------------------------
    const query = reactive({
      name: "",
      currentPage: 1,
      pageSize: 10,
    });

    const search = () => {
      query.currentPage = 1;
      query.pageSize = 10;
      list();
    }

    const initQuery = () => {
      query.name = "";
      query.currentPage = 1;
      query.pageSize = 10;
    }

    const reload = () => {
      initQuery();
      list();
    }

    returnObj.query = query;
    returnObj.search = search;
    returnObj.reload = reload;

    // ------------ 添加弹框 ------------------------
    const addFormRef = ref();
    const addForm = reactive({
      visible: false,
      data: {
      },
    });

    const initAddForm = () => {
      addForm.data = {
      }
    }

    const toAdd = async () => {
      initAddForm();
      addForm.visible = true;
    }

    const cancelAdd = () => {
      addFormRef.value.resetFields();
      addForm.visible = false;
    }

    const add = () => {
      addFormRef.value.validateFields().then(async () => {
        const param = {
          ...addForm.data,
        }
        const res = await productApi.insert(param);
        if (res.success) {
          message.success("添加成功");
          reflush();
          cancelAdd();
        }
      });
    }


    returnObj.addFormRef = addFormRef;
    returnObj.addForm = addForm;
    returnObj.toAdd = toAdd;
    returnObj.cancelAdd = cancelAdd;
    returnObj.add = add;

    // ------------ 修改弹框 ------------------------
    const updateFormRef = ref();
    const updateForm = reactive({
      visible: false,
      data: {
      },
    });

    const initUpdateForm = (item: any) => {
      const obj = clone(item);
      deleteKeyIgnore(obj, "id", "name", "sort", "updateVersion");
      updateForm.data = obj;
    }

    const toUpdate = (item: any) => {
      initUpdateForm(item);
      updateForm.visible = true;
    }

    const cancelUpdate = () => {
      updateFormRef.value.resetFields();
      updateForm.visible = false;
    }

    const update = () => {
      updateFormRef.value.validateFields().then(async () => {
        const param = {
          ...updateForm.data,
        }
        const res = await productApi.update(param);
        if (res.success) {
          message.success("更新成功");
          reflush();
          cancelUpdate();
        }
      });
    }

    returnObj.updateFormRef = updateFormRef;
    returnObj.updateForm = updateForm;
    returnObj.toUpdate = toUpdate;
    returnObj.cancelUpdate = cancelUpdate;
    returnObj.update = update;

    // ------------ 表格 ------------------------
    const tableData = reactive({
      total: 0,
      data: [],
      listColumns: [
        {
          title: "序号",
          dataIndex: "index",
          align: "center",
          width: "50px",
        },
        {
          title: "产品名称",
          dataIndex: "name",
          key: "name",
          width: "100px",
          align: "center",
        },
        {
          title: "产品编码",
          dataIndex: "code",
          key: "code",
          width: "100px",
          align: "center",
        },
        {
          title: "排序值",
          dataIndex: "sort",
          key: "sort",
          width: "50px",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: "50px",
          align: "center",
        },
      ],
    });

    const pageChange = (page: number, pageSize: number) => {
      query.currentPage = page;
      query.pageSize = pageSize;
      list();
    }
    returnObj.pageChange = pageChange;

    const list = async () => {
      clearObject(query);
      const res = await productApi.page(query);
      if (res.success) {
        tableData.data = res.result;
        tableData.total = res.count;
      }
    }

    const reflush = () => {
      initQuery();
      list();
    }

    const del = async (item: any) => {
      const res = await productApi.delete(item.id);
      if (res.success) {
        message.success("删除成功");
        reflush();
      }
    }

    returnObj.tableData = tableData;
    returnObj.del = del;

    const state = reactive({});

    // ------------查询------------------

    // --------------初始化--------------------------

    const initData = () => {
      reflush();
    }

    initData();

    return {
      ...returnObj,
      formLayout,
      state,
    }
  },
});
</script>

<style lang="less" scoped>
.search {
  display: flex;
  justify-content: space-between;
  padding: 40px 90px 0 50px;
}
.ant-table-wrapper {
  margin: 40px;
}

.searchInfo {
  width: 80%;
  display: flex;

  .ant-input {
    width: 180px;
    margin: 0 10px;
  }
  .ant-select {
    width: 180px;
    margin: 0 10px;
  }
  .search-btn {
    margin: 0 10px;
  }
}
.ant-pagination {
  padding-top: 20px;
}
.ant-modal {
  .ant-input {
    width: 280px;
  }
  .ant-select {
    width: 280px;
  }
  .ant-picker {
    width: 200px;
  }
  .ant-input-number {
    width: 100px;
  }
}
</style>